<template>
	<view class="message-detail">
		<view class="detail-header">
			<text class="detail-title">{{ notice.title }}</text>
			<view class="detail-info">
				<text class="detail-type">{{ getMessageType(notice.type) }}</text>
				<text class="detail-time">{{ formatTime(notice.createTime) }}</text>
			</view>
		</view>

		<view class="detail-content">
			{{ notice.content }}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				notice: {
					content: "",
					createTime: "",
					id: 0,
					isRead: 0,
					title: "",
					type: 0,
					userId: 0
				}
			}
		},
		onLoad(options) {
			this.notice = JSON.parse(options.notice);
		},
		methods: {
			// 获取消息详情
			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';

				const date = new Date(timeStr.replace(/-/g, '/'));
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();

				return `${year}年${month}月${day}日 ${hours < 10 ? '0' + hours : hours}:${minutes < 10 ? '0' + minutes : minutes}`;
			},

			// 获取消息类型
			getMessageType(type) {
				const typeMap = {
					1: '个人消息',
					2: '系统消息',
					3: '订单通知',
					4: '用户消息'
				};

				return typeMap[type] || '其他消息';
			}
		}
	}
</script>

<style>
	.message-detail {
		min-height: 100vh;
		background-color: #ffffff;
		padding: 30rpx;
	}

	.detail-header {
		margin-bottom: 40rpx;
		border-bottom: 1rpx solid #eaeaea;
		padding-bottom: 30rpx;
	}

	.detail-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
		display: block;
	}

	.detail-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-type {
		font-size: 24rpx;
		color: #666666;
		background-color: #f0f0f0;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
	}

	.detail-time {
		font-size: 24rpx;
		color: #999999;
	}

	.detail-content {
		font-size: 30rpx;
		color: #333333;
		line-height: 1.8;
	}
</style>